<template>
  <view class="page">
    <view class="zhengmian">
      <view class="sfz">
        <view>身份证正面</view>
        <view>上传您的证件正面照</view>
      </view>
      <view
        @tap="chooseImage"
        class="zhengmian-page"
      >
        <image
          v-if="!showImage"
          src="../../../static/yfb/my/zhengmian@2x.png"
        ></image>
        <image
          v-if="showImage"
          :src="data[0]"
        ></image>
      </view>
    </view>
    <view class="fanmian">
      <view class="sfz">
        <view>身份证反面</view>
        <view>上传您的证件反面照</view>
      </view>
      <view
        @tap="chooseImage_two"
        class="fanmian-page"
      >
        <image
          v-if="!showImageTow"
          src="../../../static/yfb/my/fanmian@2x.png"
        ></image>
        <image
          v-if="showImageTow"
          :src="imageTwo[0]"
        ></image>

      </view>

    </view>
    <button class="btn">提交认证</button>
    <!-- <inputs :inputs=inputs></inputs> -->
  </view>

</template>

<script>
// import inputs from "@/components/QuShe-inputs/inputs";
export default {
  data() {
    return {
      inputs: [
        {
          title: "身份证截图",
          pics: true,
          picsArray: [{ title: "身份证正面" }, { title: "身份证背面" }]
        }
      ],
      data: "",
      imageTwo: "",
      showImage: false,
      showImageTow: false
    };
  },
  components: {
    // inputs
  },
  methods: {
    chooseImage() {
      // console.log(this.showImage);
      var that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function(res) {
          console.log(JSON.stringify(res.tempFilePaths));
          that.data = res.tempFilePaths;
          console.log(that.showImage);
          that.showImage = true;
          console.log(that.showImage);
        }
      });
    },
    chooseImage_two() {
      // console.log(this.showImage);
      var that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function(res) {
          console.log(JSON.stringify(res.tempFilePaths));
          that.imageTwo = res.tempFilePaths;
          console.log(that.showImageTow);
          that.showImageTow = true;
          console.log(that.showImageTow);
        }
      });
    }
  }
};
</script>

<style lang="scss"  scoped>
.zhengmian {
  width: 690upx;
  height: 234upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 16upx 0px rgba(222, 225, 233, 0.57);
  border-radius: 20upx;
  margin: 40upx 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .zhengmian-page {
    width: 253upx;
    height: 163upx;
    // background-image: url("../../../static/yfb/my/zhengmian@2x.png");
    // background-size: cover;
    image {
      width: 253upx;
      height: 163upx;
    }
  }
}
.fanmian {
  width: 690upx;
  height: 234upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 16upx 0px rgba(222, 225, 233, 0.57);
  border-radius: 20upx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .fanmian-page {
    width: 253upx;
    height: 163upx;
    // background-image: url("../../../static/yfb/my/zhengmian@2x.png");
    // background-size: cover;
    image {
      width: 253upx;
      height: 163upx;
    }
  }
}
.page {
  display: flex;

  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
  height: 667px;
  background: rgba(255, 255, 255, 1);
}
.btn {
  height: 88upx;
  color: white;
  width: 85%;
  margin: 0 auto;
  line-height: 88upx;
  margin-top: 37upx;
  background: rgba(82, 153, 247, 1);
  border-radius: 5px;
}
.sfz {
  view:nth-child(1) {
    font-size: 28upx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(40, 40, 57, 1);
  }
  view:nth-child(2) {
    font-size: 24upx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(153, 153, 164, 1);
  }
}
</style>